<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vivus.js - manual tests page</title>
    <meta name="description" content="SVG Drawing Animation" />

    <style type="text/css">

      /* Base style */
      html {
        font-size: 24px;
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0 0 40px;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        font-weight: 200;
        color: #666666;
        background-color: #FFFFFF;
        word-break: break-word;
      }
      h1, h2, h3, h4, h5, h6, p {
        font-weight: 100;
      }
      a, a:visited, a:hover, a:link {
        color: inherit;
        outline: 0;
      }
      small {
        font-weight: 100;
      }
      p {
        font-size: 1rem;
        line-height: 1.4rem;
      }
      button, .button {
        margin: 0; padding: 3px 6px;
        border-radius: 6px;
        border: 1px solid currentColor;
        color: inherit;
        background-color: rgba(0,0,0,0);
        font-size: 0.6rem;
        font-weight: 300;
        text-decoration: none;
        cursor: pointer;
        outline: 0;
      }
      button.active, .button.active {
        background-color: currentColor;
      }
      button.active span, .button.active span {
        color: #FFFFFF;
      }
      i {
        background-color: rgba(0, 0, 0, 0.25);
        border-radius: 4px;
      }
      svg * {
        fill: none;
        stroke: currentColor;
      }

      /* Layout */
      .content {
        margin: auto;
        max-width: 960px;
      }

      .box {
        width: 100%;
        display: inline-block;
        vertical-align: top;
      }

      .section {
        min-height: 90%;
        padding: 20px;
        box-sizing: border-box;
      }

      .warning {
        padding: .5rem .75rem;
        border: 1px solid currentColor;
        color: #fff;
        background-color: #c00;
        border-radius: .25rem;
      }

      .hidden {
        display: none;
      }

      @media (min-width: 768px) {
        .box-50 {
          width: 50%;
        }

        .section {
          display: flex;
          flex-direction: row;
        }
      }

      /* Themes */
      .intro    {display: block;}
      .sunrise  {color: #f037a5; background-color: #f8c72c;}
      .matrix   {color: #86e0c4; background-color: #181f21;}
      .electric {color: #78C9DB; background-color: #E4175B;}
      .night    {color: #D3D679; background-color: #316BD2;}

    </style>
  </head>
  <body>

    <div class="section intro">
      <h2>Vivus manual (cheap) tests.</h2>
      <p>Just scroll along the page and if a glitch appear or the visual appearance is not like the description, it's not good.</p>
      <p id="config-instructions" class="warning hidden">
        To use this page you must use an HTTP server to serve files. Run <i>npm run serve</i> in the repository then go to the <a href="http://127.0.0.1:8844/test/manual">test page</a>
      </p>
    </div>

    <div class="section matrix">
      <div class="content">
        <div class="box box-50">
          <p>
            This should display the obturateur SVG like on the demo page. The strokes must be orange. The element must remain an <i>object</i> tag.
          </p>
          <button onclick="this.textContent=(document.querySelector('object#obt')?'Pass!':'Failed.')">Test</button>
        </div><div class="box box-50">
          <object id="obt" data="obturateur.svg" type="image/svg+xml" style="width: 100%; max-height: 250px;"></object>
        </div>
      </div>
    </div>

    <div class="section sunrise">
      <div class="content">
        <div class="box box-50">
          <div id="polaroid-dynamic"></div>
        </div><div class="box box-50">
          <p>
            This should display the polaroid SVG like on the demo page. The strokes must have the same color as this text.
          </p>
        </div>
      </div>
    </div>

    <div class="section electric">
      <div class="content">
        <div class="box box-50">
          <p>
            This should display the 'Hi there' SVG like ready to start. Be sure no glitch appear (no small path or dots). Click on the following button to start.
          </p>
          <button onclick="hiD.play();">Start</button>
        </div><div class="box box-50">
          <div id="hi-dynamic" style="max-width: 300px; margin: auto;"></div>
        </div>
      </div>
    </div>

    <div class="section night">
      <div class="content">
        <div class="box box-50">
          <div id="synth-dynamic" style="max-width: 400px; margin: auto;"></div>
        </div><div class="box box-50">
          <p>
            This should display a synth ready to start. Be sure no glitch appear (no small path or dots). The animation should use a custom path timing function (ease_in: slow at start then finish fast.). Click on the following button to start.
          </p>
          <button onclick="synthD.play();">Start</button>
        </div>
      </div>
    </div>

    <!-- Le scripts -->
    <script src="/dist/vivus.js"></script>
    <script>

      // Display warning message if not on http server
      if (window.location.protocol === 'file:') {
        var configIntro = document.getElementById('config-instructions');
        configIntro.style.display = 'block';
      }

      // Obturateur
      var obt1 = new Vivus('obt', {
        type: 'delayed',
        duration: 150
      });

      // polaroid-dynamic
      var polaroidD = new Vivus('polaroid-dynamic', {
        file: 'polaroid.svg',
        type: 'scenario-sync',
        duration: 20
      });

      var hiD = new Vivus('hi-dynamic', {
        file: 'hi-there.svg',
        type: 'scenario-sync',
        duration: 20,
        start: 'manual'
      });

      var synthD = new Vivus('synth-dynamic', {
        file: 'synth.svg',
        type: 'oneByOne',
        duration: 200,
        start: 'manual',
        animTimingFunction: Vivus.EASE_IN
      });

      function easeOutBounce (x) {
        var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
        var rate = Math.pow(base,1.5);
        var rateR = Math.pow(1 - x, 2);
        var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
        return (1- rateR) + (progress * rateR);
      }
      
    </script>
  </body>
</html>
